import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
import { Consts } from 'src/app/consts/consts';
import { DeptQueryParam } from 'src/app/models/param/dept-query.param';
import { DeptDto } from 'src/app/models/sys/dept.dto';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-employee-dept',
  templateUrl: './employee-dept.component.html',
  styleUrl: './employee-dept.component.less'
})
export class EmployeeDeptComponent implements OnInit {
  @Output() selectedDept = new EventEmitter<number>();

  depts: DeptDto[] = [];
  deptNodes: NzTreeNodeOptions[] = [];
  selectedNode?: string;

  expandIcon = 'down';
  expandKeys: string[] = [];
  expandAll = false;
  allKeys: string[] = [];

  constructor(private _api: ApiService,
    private _message: NzMessageService) { }

  ngOnInit(): void {
    this.getDepts();
  }

  getDepts() {
    const param = new DeptQueryParam();
    param.pageNum = 1;
    param.pageSize = 10000;
    this._api.getDeptTree(param).subscribe((resp) => {
      if (resp.code == Consts.RESP_OK && resp.data) {
        this.depts = resp.data;
        this.convertToTreeNodes(this.depts);
      }
    });
  }

  onDeptClick(event: NzFormatEmitEvent) {
    console.log('dept clicked');
    const node = event.node;
    if (node != null) {
      const deptKey = node.key;
      console.log(`dept ${deptKey} clicked`);
      const deptId = Number(deptKey);
      this.selectedDept.emit(deptId);
    }
  }

  convertToTreeNodes(depts: DeptDto[]) {
    this.deptNodes = [];
    this.allKeys = [];
    this.expandKeys = [];

    for (const dept of depts) {

      const node = this.convertToTreeNode(dept);
      //      console.log(`convert parent ${node.key}`);
      this.deptNodes.push(node);
    }
  }

  convertToTreeNode(dept: DeptDto): NzTreeNodeOptions {
    const result: NzTreeNodeOptions = {
      title: dept.deptName,
      key: dept.deptId.toString(),
      children: []
    }

    this.allKeys.push(result.key);

    if (dept.children == null || dept.children.length == 0) {
      result.isLeaf = true;
    }

    const nodeChildren: NzTreeNodeOptions[] = [];
    if (dept.children) {
      for (const child of dept.children) {
        const nodeChild = this.convertToTreeNode(child);
        //      console.log(`add child ${nodeChild.key} to parent ${result.key}`);
        nodeChildren.push(nodeChild);
      }
      result.children = nodeChildren;
    }

    return result;
  }

  onReload() {
    this.getDepts();
  }

  onExpand() {
    if (this.expandIcon === 'down') {
      console.log('onExpand with down');
      this.expandKeys = this.allKeys;
      this.expandIcon = 'up';
    } else {
      console.log('onExpand with up');
      this.expandKeys = [];
      for (const parent of this.deptNodes) {
        console.log(`set ${parent.key} to not expand`);
        parent.expanded = false;
      }
      this.expandIcon = 'down';
    }
  }
}
